<template>
  <div class="emsystem">
    <div class="header">系统运行监管大屏</div>
    <div class="em-title">系统全景图</div>
    <div class="back" v-if="!isSymbol" @click="onSwitchView">返回主视图</div>
    <div v-if="loadingVisible" class="loading-container">
      <loading />
      <div class="tips">
        <div>加载中,请耐心等待</div>
        <div>已加载{{ percent.toFixed(2) }}%</div>
      </div>
    </div>
    <div v-else class="content">
      <!--      <productPanel />-->
      <div class="lef-chart">
        <LinkChartPanel class="link-chart" />
        <PieChartPanel class="pie-chart" />
        <ResponsePanel />
        <AlertPenal />
      </div>
      <FirstView v-if="isSymbol" ref="view" :is-symbol="isSymbol" :loading-visible="loadingVisible" @onClickProduct="onClickProduct" />
      <ThreeDWeb
        v-else
        ref="webThree"
        :loading-visible="loadingVisible"
        @clickOnProductByThree="clickOnProductByThree"
      />
    </div>
    <DrawerPanel ref="drawer" :is-drawer.sync="isDrawer" :type="type" />
  </div>
</template>

<script>
import loading from '@/components/loading'
import Symbols from './symbols'
import ThreeDWeb from './ThreeDWeb'
import FirstView from './firstView'
import PlayAllScene from './playAllScene'
import PieChartPanel from './pieChart'
import LinkChartPanel from './linkChart'
import ResponsePanel from './responseItem'
import AlertPenal from './alertList'
import DrawerPanel from './drawer'

export default {
  name: 'EmSystem',
  components: { loading, Symbols, DrawerPanel, FirstView, ThreeDWeb, PlayAllScene, LinkChartPanel, PieChartPanel, ResponsePanel, AlertPenal },
  data() {
    return {
      loadingVisible: true,
      percent: 0,
      setIntervalFun: null,
      isSymbol: true,
      isDrawer: false,
      type: null
    }
  },
  watch: {
  },
  mounted() {
    this.setProgress()
  },
  methods: {
    // 第二视图中的点击事件
    clickOnProductByThree(type) {
      this.type = type
      switch (type) {
        case 1: // 产品1
        // case 2: // 产品2
        // case 3: // 产品3
          this.isDrawer = true
          break
        case 4: // 站点1
        // case 5: // 站点2
        // case 6: // 站点3
        // case 7: // 站点4
          this.isDrawer = true
          break
        // case 12: // 服务器1
        // case 13: // 服务器2
        // case 14: // 服务器3
        // case 15: // 服务器4
        // case 16: // 服务器5
        case 17: // 服务器6
          this.isDrawer = true
          break
      }
    },

    // 第一试图中的点击事件
    onClickProduct() {
      this.isSymbol = false
      this.$refs.view.dataModel.clear()
      // this.setProgress()
    },

    //
    onSwitchView() {
      this.isSymbol = true
      this.$refs.webThree.dataModel.clear()
    },

    setProgress() {
      this.setIntervalFun = setInterval(() => {
        this.progress(1)
      }, 30)
    },
    progress() {
      if (this.percent >= 98) {
        this.percent = 100
        this.loadingVisible = false
        clearInterval(this.setIntervalFun)
        this.setIntervalFun = null
      }
      this.percent = this.percent + 2
    }
  }
}
</script>

<style scoped lang="scss">
  .emsystem {
    width: 100%;
    height: 100vh;
    background: #212121 url('/assets/htdesign/scene/skybox/vague_01.jpg') no-repeat center center / cover;
  }
  .em-title {
    position: fixed;
    top: 80px;
    left: 30%;
    font-size: 28px;
    color: #fff;
    z-index: 9;
  }
  .back {
    position: fixed;
    top: 80px;
    left: 70%;
    font-size: 14px;
    color: #fff;
    z-index: 9;
    cursor: pointer;
    &:hover {
      color: #2a6aff;
    }
  }
  .header {
    font-size: 36px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-weight: 900;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 999;
  }

  .loading-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 999999;
    background-color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tips {
      margin-top: 10px;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      line-height: 20px;
      text-align: center;
    }
  }

  .lef-chart {
    width: 25%;
    max-width: 500px;
    min-width: 380px;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 2;
  }
  .content {
    /*padding-left: 600px;*/
  }
</style>
<style lang="scss">
  #app ~ div {
    /*left: 500px !important;*/
  }
</style>
